<template>
  <div>
    <a-menu
      v-model:openKeys="openKeys.openKeys"
      v-model:selectedKeys="openKeys.selectedKeys"
      mode="inline"
      theme="dark"
      :inlineCollapsed="state"
      @click="handleClick"
    >
      <a-sub-menu key="sub1">
        <template v-slot:title>
          <span><AppstoreOutlined /><span>起步</span></span>
        </template>
        <a-menu-item key="01">vue cli</a-menu-item>
        <a-menu-item key="02">创建项目</a-menu-item>
        <a-menu-item key="03">配置</a-menu-item>
      </a-sub-menu>
      <a-menu-item key="1">
        <ApartmentOutlined />
        <span>Vue-cli中文文档</span>
      </a-menu-item>
      <a-menu-item key="2">
        <ApartmentOutlined />
        <span>Vue3.0中文文档</span>
      </a-menu-item>
      <a-menu-item key="3">
        <AimOutlined />
        <span>AntD Vue文档</span>
      </a-menu-item>
      <a-sub-menu key="sub2">
        <template v-slot:title>
          <span><AppstoreOutlined /><span>composition api</span></span>
        </template>
        <a-menu-item key="04">vue文件结构</a-menu-item>
        <a-menu-item key="05">setup</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script lang="ts">
import { ref, Ref, reactive,defineComponent, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import { AimOutlined, ApartmentOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
export default defineComponent({
  name: 'LeftMenu',
  components: {
    AimOutlined,
    ApartmentOutlined,
    AppstoreOutlined
  },
  props: {
    state: Boolean
  },
  setup(props, context){
    const router = useRouter()
    let state: Ref<boolean> = ref(props.state)
    watchEffect(() => {
      state.value = props.state
    })

    let openKeys = reactive({
      selectedKeys: ['sub1'],
      openKeys: ['']
    })

    let handleClick = ({ item, key, keyPath }) => {
      if(key == '1'){
        router.push({path: "/cli"})
      } else if(key == '2') {
        router.push({path: "/document"})
      } else if(key == '3') {
        router.push({path: "/ad"})
      } else if (key == '01') {
        router.push({path: "/vuecli"})
      } else if (key == '02') {
        router.push({path: "/create"})
      } else if (key == '03') {
        router.push({path: "/config"})
      } else if (key == '04') {
        router.push({path: "/structure"})
      } else if (key == '05') {
        router.push({path: "/setup"})
      }
    }
    return { state, openKeys, handleClick }
  }
})
</script>

<style lang="less" scoped>
  .ant-menu {
    height: 100vh;
    user-select: none;
  }
</style>
